import React, { Component } from 'react'
import companyAccountSettingService from '../company-account-setting.service'
import Info from "components/info";
import { Button, Popover, Tabs } from "antd";
import { messages } from "share/common";
import SlideFrame from "components/slide-frame";
import AccountRule from "./account-rule";
import TemplateContent from "containers/finance-setting/loan-setting/template-content";
import AssignCompany from "../assign-company";
import 'styles/pay-setting/account-detail.scss'
import Template from "components/UI/template";
import Condition from "components/condition";

const { If } = Condition;
const { Header, Middle } = Template;

class AccountDetail extends Component{

  attributes = [
    { title: messages('common.column.status')/*状态*/, dataIndex: 'enabled', render: value => value ? messages('finance-4.key344')/*启用temp*/ : messages('finance-4.key345')/*禁用temp*/ },
    { dataIndex: 'companyName', title: messages('finance-4.key346')/*所属组织*/ },
    { title: messages('finance-4.key49')/*银行账户名称*/, dataIndex: 'bankAccountName' },
    { title: messages('finance-4.key50')/*银行账户账号*/, dataIndex: 'bankAccountNumber' },
    { title: messages('common.currency')/*币种*/, dataIndex: 'currencyCode' },
    { title: messages('finance-4.key22')/*银行名称*/, dataIndex: 'bankName' },
    { title: messages('common.remark')/*备注*/, dataIndex: 'remark', render: remark => (
        <Popover content={remark}>
          {remark}
        </Popover>)
    }
  ];

  componentWillMount() {
    this.getInfo()
  };

  state = {
    info: {},
    infoLoading: false,
    status: 'Authorization'
  };

  getInfo = () => {
    const { companyBankId } = this.props.params;
    this.setState({ infoLoading: true });
    companyAccountSettingService.getCompanyBankByCompanyBankId(companyBankId)
      .then(res => {
        this.setState({ info: res.data });
      })
      .finally(() => {
        this.setState({ infoLoading: false });
      })
  };

  handleEditInfo = () => {
    const { info } = this.state;
    SlideFrame.open({
      content: AccountRule,
      title: messages('finance-4.key21')/*银行账户*/,
      params: { record: info },
      afterClose: () => this.getInfo()
    }, this);
  };

  render() {
    const { info, infoLoading, status } = this.state;
    const { companyBankId } = this.props.params;
    return (
      <Template>
        <Header>
          <Info
            title='基本信息'
            attributes={this.attributes}
            dataSource={info}
            loading={infoLoading}
          >
            <Button type='primary' onClick={this.handleEditInfo}>{messages('common.edit')/*编辑*/}</Button>
          </Info>
          <Tabs defaultActiveKey='Authorization' onChange={key => this.setState({ status: key })}>
            <Tabs.TabPane tab={messages('finance-4.key348')/*账户授权*/} key='Authorization'/>
            <Tabs.TabPane tab={messages('finance-4.key81')/*付款方式*/} key='ApyType'/>
            <Tabs.TabPane tab={messages('finance-4.key349')/*付款公司授权*/} key='ASSIGN_COMPANY'/>
          </Tabs>
        </Header>
        <Middle>
          <If value={status === 'Authorization'}>
            <TemplateContent tableKey={'Authorization'} id={companyBankId} accountType={'BANKCARD_ACCOUNT'}/>
          </If>
          <If value={status === 'ApyType'}>
            <TemplateContent tableKey={'ApyType'} id={companyBankId} accountType={'BANKCARD_ACCOUNT'}/>
          </If>
          <If value={status === 'ASSIGN_COMPANY'}>
            <AssignCompany id={companyBankId} setOfBooksId={info.setOfBooksId} accountType={'BANKCARD_ACCOUNT'}/>
          </If>
        </Middle>
      </Template>
    )
  }

}

export default AccountDetail
